<template>
    <div>
        <!-- 表格 -->
        <!-- 要使用`el-table`组件原有的属性，直接加在Table标签上即可 -->
        <Table ref="tableRef" :column="tableColumn" :data="tableData" :pagination="pagination" v-model:showComSearch="showRuleSearchValue" :tableButtons="buttons">
            <template v-slot:tableSearch>
                <el-input style="width: 240px" placeholder="Please input" v-model="name" />
            </template>

            <template v-slot:headerSlotDate>
                <el-input style="width: 110px" v-model="date" size="small" placeholder="Type to search" />
            </template>
            <template v-slot:slotDate="scope">
                <el-input style="width: 240px" placeholder="Please input" v-model="scope.data.row.date" />
            </template>
        </Table>
    </div>
</template>



<script setup lang="ts">
import { ref, reactive } from 'vue'
import Table from '/@/components/table/index.vue'
defineOptions({
    name: 'rule/rule',
})

var name = ref("123");
var date = ref("123");
// 控制规则表格搜索显示状态
const showRuleSearchValue = ref(true);

var tableColumn = reactive<TableColumn[]>([
    {
        label: "Date",
        prop: "date",
        slotName: "slotDate",
        headerSlotName: "headerSlotDate",
        sortable:true,
        // sortMethod:(a:any,b:any)=>{
        //     return a.date.localeCompare(b.date);
        // }
    },
    {
        label: "Name",
        prop: "name",
        editable: true,
        editType: 'text'
    },
    {
        label: "Address",
        prop: "address",
        showOverflowTooltip:true,
    },
  {
    prop: 'age',
    label: '年龄',
    fieldType: 'number',
    fieldConfig: {
      min: 0,
      max: 120
    }
  },
  {
    prop: 'salary',
    label: '薪资',
    fieldType: 'money',
    fieldConfig: {
      precision: 2,
      currency: '¥'
    }
  },
  {
    prop: 'birthDate',
    label: '出生日期',
    fieldType: 'date',
    fieldConfig: {
      dateFormat: 'YYYY-MM-DD'
    }
  },
  {
    prop: 'gender',
    label: '性别',
    fieldType: 'select',
    fieldConfig: {
      options: [
        { label: '男', value: 'male' },
        { label: '女', value: 'female' }
      ]
    }
  },
  {
    prop: 'isActive',
    label: '是否活跃',
    fieldType: 'boolean'
  }

]);

var tableData = reactive<anyObj[]>([
    {
        date: '2016-05-03',
        name: 'Tom',
        address: 'No. 189, Grove St, Los AngelesNo. 189, Grove St, Los AngelesNo. 189, Grove St, Los AngelesNo. 189, Grove St, Los AngelesNo. 189, Grove St, Los AngelesNo. 189, Grove St, Los AngelesNo. 189, Grove St, Los Angeles',
    },
    {
        date: '2016-05-02',
        name: 'John',
        address: 'No. 189, Grove St, Los Angeles',
    },
    {
        date: '2016-05-04',
        name: 'Morgan',
        address: 'No. 189, Grove St, Los Angeles',
    },
    {
        date: '2016-05-01',
        name: 'Jessy',
        address: 'No. 189, Grove St, Los Angeles',
    },
])
tableData[0].name = "12221";

debugger


var sizeChange = (value: number) => {
    console.log('sizeChange', value);
};

var currentChange = (value: number) => {
    console.log('currentChange', value);
};

var tableChange = (value: number) => {
    console.log('tableChange', value);
};

var pagination = reactive<TablePagination>({
    // currentPage: 1,
    // pageSize: 10,
    // total: 0,
    // layout: "sizes, prev, pager, next, jumper, ->, total, slot",
    // pageSizes: [10, 50, 100, 200],
    //page-size 改变时触发
    onTableSizeChange: sizeChange,
    //current-page 改变时触发
    onTableCurrentChange: currentChange,
    //current-page 或 page-size 更改时触发
    onTableChange: tableChange
})



var add = function () {
    alert("新增")
}
var buttons = reactive([
    {
        tipName: "12312",
        iconName: "fa fa-comment-o",
        name: "新增",
        onClick: add
    }
])

</script>
